import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:high_help_apps/common/values/colors.dart';
import 'package:high_help_apps/common/widgets/common/common_text_button.dart';
import 'package:high_help_apps/common/widgets/common/paper_tip.dart';

import 'sign_in_logic.dart';
import 'sign_in_state.dart';

class SignInPage extends StatefulWidget {
  @override
  _SignInPageState createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {
  final SignInLogic logic = Get.put(SignInLogic());
  final SignInState state = Get.find<SignInLogic>().state;

  TextEditingController usernameController = new TextEditingController(text: 'admin1');
  TextEditingController passwordController = new TextEditingController(text: 'admin1');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [_buildBackgroundImage(), _buildLoginBox()],
        ));
  }

  /// 展示登录页的背景图片
  Widget _buildBackgroundImage() => Container(
        height: 1.0.sh,
        width: 1.0.sw,
        decoration: BoxDecoration(
            image: DecorationImage(
                image:
                    AssetImage('assets/images/signin/sign_in_background.jpg'),
                fit: BoxFit.cover)),
      );

  /// 构建下方白色登录区域
  Widget _buildLoginBox() => Positioned(
        bottom: 0,
        child: Container(
          width: 1.0.sw,
          height: 500.h,
          padding:
              EdgeInsets.only(left: 20.r, right: 20.r, top: 50.r, bottom: 25.r),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30), topRight: Radius.circular(30))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildLoginBoxHeaderTip(),
              SizedBox(
                height: 10.h,
              ),
              _buildFormBox(),
              _buildForgotPassword(),
              _buildRegisterButton()
            ],
          ),
        ),
      );

  /// 构建登陆区域的顶部标题
  Widget _buildLoginBoxHeaderTip() => PageHeaderTip(
        margin: EdgeInsets.zero,
        padding: EdgeInsets.zero,
        title: '登录',
        subtitle: '你好, 请登录您的帐号',
        child: Image.asset('assets/images/signin/user_login.png'),
      );

  /// 构建中间的登录表单
  Widget _buildFormBox() => Column(
        children: <Widget>[
          TextField(
              autofocus: false,
              controller: usernameController,
              decoration: InputDecoration(
                hintText: "用户名",
                prefixIcon: Icon(
                  Icons.account_circle_outlined,
                  color: AppColors.primaryElement,
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: AppColors.subTextColor,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: AppColors.primaryElement,
                  ),
                ),
              ),
              cursorColor: AppColors.subTextColor),
          TextField(
              autofocus: false,
              controller: passwordController,
              decoration: InputDecoration(
                hintText: "密码",
                prefixIcon: Icon(
                  Icons.lock,
                  color: AppColors.primaryElement,
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: AppColors.subTextColor,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: AppColors.primaryElement,
                  ),
                ),
              ),
              cursorColor: AppColors.subTextColor,
              obscureText: true),
          // 登录按钮
          Padding(
            padding: EdgeInsets.only(top: 24.h),
            child: _buildLoginButton(),
          )
        ],
      );

  /// 构建忘记密码
  Widget _buildForgotPassword() => GestureDetector(
        onTap: () {},
        child: Center(
          child: Text(
            '忘记密码',
            style: TextStyle(color: AppColors.subTextColor),
          ),
        ),
      );

  /// 构建登录按钮
  Widget _buildLoginButton() => CommonTextButton(
        padding: EdgeInsets.only(bottom: 15.h),
        onPressed: () => logic.loginAccount(
            usernameController.text, passwordController.text),
        borderRadius: 12.r,
        title: '登录',
      );

  /// 构建注册按钮
  Widget _buildRegisterButton() => CommonTextButton(
        padding: EdgeInsets.only(top: 45.h),
        border: Border.all(color: AppColors.subTextColor12, width: 2.r),
        onPressed: logic.redirectToRegisterPage,
        borderRadius: 12.r,
        title: '注册',
        textColor: Colors.black,
        backgroundColor: Colors.white,
      );

  @override
  void dispose() {
    Get.delete<SignInLogic>();
    usernameController.dispose();
    passwordController.dispose();
    super.dispose();
  }
}
